
<!DOCTYPE html>
<html>

<head>
    <!-- Basic -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta http-equiv="refresh" content="18000"  >
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- Site Metas -->
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Coffeee</title>

    <!-- slider stylesheet -->
    <link rel="stylesheet" type="text/css" href="../static/css/owl.carousel.min.css" />

    <!-- bootstrap core css -->
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
{#    <link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">#}
    <!-- fonts style -->
{#    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,700&display=swap" rel="stylesheet" />#}

    <!-- Custom styles for this template -->
    <link href="../static/css/style.css" rel="stylesheet" />
    <!-- responsive style -->
    <link href="../static/css/responsive.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/echarts/5.0.0/echarts.min.js"></script>
</head>

<body style="background-color: #fefefe">
<script src="https://www.layuicdn.com/layui/layui.js"></script>


{#------------------------本页面使用LAYUI---------------------#}

<div class="layui-row layui-col-space5" style="width: 1890px;margin-bottom: 15px;margin-top:20px;">
    <div class="layui-col-md5">
        <div class="grid-demo grid-demo-bg1" style="margin-left: 650px;margin-top: 30px"><img src="../static/pic/logo.png" width="180px" height="50"></div>
    </div>
    <div class="layui-col-md3">
        <div class="grid-demo" style="margin-top: 40px;margin-left: 50px"><h1 style="color: #0C0C0C">科立锐兴战情看板</h1></div>

    </div>
    <div class="layui-col-md3">
        <div class="grid-demo grid-demo-bg1" style="margin-top: 50px"><a style="color: #fefefe; font-size: medium;left: 400px" href="http://10.130.1.252/changer-1117.asp?sn=CQSCA0400244"><button class="ui-btn ui-btn-primary">详细查询</button></a></div>
    </div>
</div>









<div class="layui-row" style="height: 50px;"></div>
{#       ---------------表格-------------------#}
{#总行#}
<div style="margin-left: 30px"><h2>及时资讯</h2></div>
<div class="layui-row" style="background-color: #fdfcfc; width: 1890px;height: 200px">
    {#       第一列#}
    <div class="layui-col-md6" style="background-color: #fefefe">
        <div class="grid-demo grid-demo-bg1">


            <div class="layui-form">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>今日工单</th>
                        <th>组装站</th>
                        <th>基测站</th>
                        <th>烧机站</th>
                        <th>功测站</th>
                        <th>包装站</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{{ sql_server_results.0 }}&nbsp;&nbsp;</td>
                        <td>{{ sql_server_results.1 }}&nbsp;&nbsp;</td>
                        <td>{{ sql_server_results.2 }}&nbsp;&nbsp;</td>
                        <td>{{ sql_server_results.3 }}&nbsp;</td>
                        <td>{{ sql_server_results.4 }}&nbsp;&nbsp;</td>
                        <td>{{ sql_server_results.5 }}&nbsp;&nbsp;</td>
                    </tr>
                    <tr>
                        <td><h6> 计划完成量：{{ sql_server_results.6 }}台</h6></td>
                        <td><h6> 良率：100% </h6></td>
                        <td><h6>完成率：{{ sql_server_results.7 }}  </h6></td>
                        <td><h6> 版本号： </h6></td>
                        <td><h6> 料号：10Q0JDEC502XH </h6></td>
                        <td><h6> -- </h6></td>
                    </tr>
                    <tr>
                        <td><h6>--</h6></td>
                        <td><h6>  --</h6></td>
                        <td><h6>-- </h6></td>
                        <td><h6> -- </h6></td>
                        <td><h6> -- </h6></td>
                        <td><h6> -- </h6></td>
                    </tr>
                    <tr>
                        <td><h6>--</h6></td>
                        <td><h6>  --</h6></td>
                        <td><h6>-- </h6></td>
                        <td><h6> -- </h6></td>
                        <td><h6> -- </h6></td>
                        <td><h6> -- </h6></td>
                    </tr>

                    </tbody>
                </table>
            </div>

        </div>
    </div>

    {#       ---------------图表-------------------#}
    <div class="layui-col-md3">
        <div class="grid-demo">

            <div style="height: 230px;width: 400px;background-color: #fefefe" id="echart01"> </div>

        </div>
    </div>
    {#       ---------------图表-------------------#}
    {#       ---------------图表-------------------#}
    <div class="layui-col-md2">
        <div class="grid-demo grid-demo-bg1">

            <div style="height: 230px;width: 400px;background-color: #fefefe" id="echart02"> </div>

        </div>
    </div>
    {#       ---------------图表-------------------#}
</div>




<div class="layui-row" style="height: 60px;width: 1890px;"></div>

<div style="margin-left: 30px"><h2>本月工单生产情况</h2></div>

<div class="layui-row" style="width: 1890px">
    <div class="layui-col-md6" style="height: 300px;margin-top: 50px">

        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>本月生产工单</th>
                <th>料号</th>
                <th>预计生产</th>
                <th>机型</th>
                <th>实际生产</th>
                <th>良率</th>


            </tr>
            </thead>
            <tbody>

            {% for i in count_list %}
                <tr>
                    <td>{{ i.0 }}</td>
                    <td>{{ i.1 }}</td>
                    <td>{{ i.2 }}</td>
                    <td>{{ i.3 }}</td>
                    <td id="product_num">{{ i.4 }}</td>

                </tr>
            {% endfor %}


            </tbody>
        </table>


    </div>
    <div class="layui-col-md3" style="height: 400px;" >
        <div style="height: 400px;width:700px;background-color: #fefefe" id="echart03"> </div>
    </div>
</div>




























</body>

<script type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../static/js/bootstrap.js"></script>
<script type="text/javascript" src="../static/js/owl.carousel.min.js">
</script>
<script type="text/javascript">
    $(".owl-carousel").owlCarousel({
        loop: true,
        margin: 20,
        nav: true,
        navText: [],
        autoplay: true,
        autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    });
</script>



</html>



<script>
    //实例化对象并配置
    var myecharts = echarts.init(document.getElementById('echart01'))
    //设置echarts属性
    var option = {
        title: {
            text: '科立锐兴当日生产',
            subtext: '比例图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['已完成', '未完成']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: {{ sql_server_results.5 }}, name: '已完成'},
                    {value: {{ sql_server_results.8 }}, name: '未完成'},

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(255,255,255,0.5)'
                    }
                }
            }
        ]
    };
    myecharts.setOption(option)
</script>

<script>
    //实例化对象并配置
    var myecharts = echarts.init(document.getElementById('echart02'))
    //设置echarts属性
    var option = {
        title: {
            text: '各工站生产情况',
            subtext: '比例图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['组装站', '基测站','烧机站','功测站','包装站']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [

                    {value: {{ sql_server_results.1 }}, name: '组装站{{ sql_server_results.10.0 }}'},
                    {value: {{ sql_server_results.2 }}, name: '基测站{{ sql_server_results.10.1 }}'},
                    {value: {{ sql_server_results.3 }}, name: '烧机站{{ sql_server_results.10.2 }}'},
                    {value: {{ sql_server_results.4 }}, name: '功测站{{ sql_server_results.10.3 }}'},
                    {value: {{ sql_server_results.5 }}, name: '包装站{{ sql_server_results.10.4 }}'},

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(255,255,251,0.5)'
                    }
                }
            }
        ]
    };
    myecharts.setOption(option)
</script>




<script>
    //实例化对象并配置
    var myecharts = echarts.init(document.getElementById('echart03'))
    //设置echarts属性
    var product_num = document.getElementById("product_num").innerHTML

    var option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [{{ one_month_num.0 }}, {{ one_month_num.1 }}, {{ one_month_num.2 }},{{ one_month_num.3 }},{{ one_month_num.4 }},{{ one_month_num.5 }},{{ one_month_num.6 }},{{ one_month_num.7 }},{{ one_month_num.8 }},{{ one_month_num.9 }},{{ one_month_num.10 }},{{ one_month_num.11 }}, ],
            type: 'bar'
        }]
    };
    myecharts.setOption(option)
</script>